
<div id="main-wrapper">
	<h1>投票详情</h1>
	<ul id="list-viewvote" class="list-group">
		<li class="list-group-item">
			<span class="li-label">题目</span>
			<p id="content"></p>
		</li>
		<li class="list-group-item">
			<span class="li-label">选项相关</span>
			<ul id="words">
                <script type="text/html" id= "tr-tmpl">
                    <li>
                        <div class="square-word"></div>
                        <span class="word"><%- word %></span>
                    </li>
                </script>
			</ul>
		</li>
		<li class="list-group-item">
			<span class="li-label">图表结果</span>
			<canvas id="chart" width="350" height="350"></canvas>
		</li>
        <li class="list-group-item">
            <span class="li-label">人数详情</span>
            <ul id="count"></ul>
        </li>
	</ul>
</div>

<script>
	var vid = getHashParams()['vid'],
		colors = ["#F38630", "#E0E4CC", "#69D2E7", "#5E344C"],
        $ulWord = $('#words'),
        trTmpl = _.template($ulWord.find('#tr-tmpl').html());

	$.get('/do/s/viewvote?vid=' + vid, function(resObj){
		var ok = resObj['ok'], msg = resObj['msg'];
		msg && notify(msg, ok);
		if (! ok) return window.history.back();

		var vote = resObj['vote'],
			content = vote['content'],
			options = vote['options'];

		$('#content').text(content);
		var pairs = _.pairs(options);
            $ulWord.html(_.reduce(pairs, function(memo, pair, i){
                return memo + trTmpl({
                    word: pair[0]
                });
             }, ''));
        var sum = _.reduce(pairs, function(memo, pair){
                return memo + pair[1];
            }, 0),
            countHtml = _.reduce(pairs, function(memo, pair, i){
                return memo + [
                    '<li>',
                    '<div class="square-count"></div>',
                        '<span class="count">'+ pair[1] +' ('
                                + (sum ? (pair[1]/sum)*100 : 0) +
                            '%)</span>',
                    '</li>'
                ].join('');
            }, '');
        $('#count').html(countHtml);
		$('.square-word').each(function(i, el) {
			$(el).css('background-color', colors[i]);
		});
        $('.square-count').each(function(i, el) {
            $(el).css('background-color', colors[i]);
        });

		$('#chart').drawPieChart(options, colors);
	});
</script>